<!--
// +----------------------------------------------------------------------
// | Copyright (c) 2017 https://gitee.com/honoryao All rights reserved.
// +----------------------------------------------------------------------
// | Author: honoryao <2463523099@qq.com>
// +----------------------------------------------------------------------
// | Time: 2018/6/8   
// +----------------------------------------------------------------------
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model双向绑定</title>
</head>
<body>
<h1>v-model事件监听</h1>
<hr>
<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
    <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
    <p>v-model.number:<input type="text" v-model.number="message"></p>
    <p>v-model.trim:<input type="text" v-model.trim="message"></p>
    <h3>多选绑定一个数组</h3>
    <p>
        <input type="checkbox" id="value1" value="value1" v-model="web_Names">
        <label for="value1">value1</label><br/>
        <input type="checkbox" id="value2" value="value2" v-model="web_Names">
        <label for="value2">value2</label><br/>
        <input type="checkbox" id="value3" value="value3" v-model="web_Names">
        <label for="value3">value3</label>
    <p>{{web_Names}}</p>
    <hr>
    <h3>单选按钮绑定</h3>
    <input type="radio" id="one" value="男" v-model="sex">
    <label for="one">男</label>
    <input type="radio" id="two" value="女" v-model="sex">
    <label for="two">女</label>
    <p>{{sex}}</p>
</div>

<script src="../assets/js/vue.js"></script>
<script>
    var app= new Vue({
        el:'#app',
        data:{
            message:'honoryao',
            sex:'男',
            web_Names:[]
        }
    });
</script>
</body>
</html>